<template>
  <!--header-->
    <div style="width: 100%;height: 50px;background-color:white;">
        <span style="font-size: 25px;padding: 20px 30px;margin-top: 10px">我的订单</span>
        <!--搜索框-->
        <el-col :span="24"  style="padding-top: 35px;padding-left: 900px">
            <el-input style="height: 35px;width: 300px;border: red 3px solid;border-radius: 0px;"
                      placeholder="商品名称/商品编号/订单号" type="text" v-model="search"></el-input>
            <el-button style="border: red 3px solid;height: 35px;width: auto;border-radius: 0px;
        background-color:red;color: white">搜索</el-button>
        </el-col>
    </div>
  <!--我的订单div-->
    <div style="width: 100%;height:100vh;background-color:white;margin-top: 10px">
        <el-row>
            <el-col :span="12" style="margin-left: 15px;margin-top: 15px">
                <el-button link type="danger" style="font-size: 20px;padding: 10px;" @click="showFinishOrders">已完成</el-button>
                <el-button link type="danger" style="font-size: 20px;padding: 10px;" @click="showPayingOrders">待付款</el-button>
                <el-button link type="danger" style="font-size: 20px;padding: 10px;" @click="showWaitingDeliveryOrders">待收货</el-button>
                <el-button link type="danger" style="font-size: 20px;padding: 10px;" @click="showWaitingCommentOrders">待评价</el-button>
                <!--添加一条黑线-->
                <el-divider style="font-weight: bold;border-width: 4px;border-color: red;"></el-divider>
            </el-col>
        </el-row>
        <!--已完成订单列表-->
        <div>
            <el-row v-for="item in orderList" v-show="finishOrderCard">
                <el-card style="width: 1250px;margin: 10px 10px;">
                    <!--订单操作栏-->
                    <div style="background-color: white;">
                        <el-row>
                            <el-col :span="24" style="border-bottom: 3px solid #777777;">
                                <!--订单创建时间-->
                                <span style="font-size: 25px;padding-left: 10px;color: red">{{item.shopName}}</span>
                                <span style="font-size: 15px;padding-left: 20px">{{item.createTime}}</span>
                                <span style="font-size: 15px;padding-left: 50px">订单号：{{item.id}}</span>
                                <el-icon style="margin-left: 1100px;padding-top: -10px" size="15px" @click="delOrder(index)"><Close /></el-icon>
                            </el-col>
                        </el-row>
                    </div>
                    <!--商品栏-->
                    <div>
                        <el-row>
                            <div>
                                <el-row :gutter="10" class="fixed-layout">
                                    <el-col :span="6">
<!--                                           <el-image :src="'http://localhost:9090'+item.productImg" style="width: 120px;height: 120px"></el-image>-->
                                        <el-image :src="baseUrl+item.productsImg" style="width: 100px;height: 100px;margin-top: 10px;display:block;" alt="Carrot Image"/>
                                    </el-col>
                                    <div style="width: 500px">
                                        <el-col :span="10" class="product-description" style="margin-left: 150px;margin-top: -90px;">
                                            {{item.productsMsg}}
                                        </el-col>
                                    </div>
                                    <el-col :span="2" class="quantity" style="position: absolute;margin-left: 450px;margin-top: -50px;">
                                      x{{item.quantity}}
                                    </el-col>
                                    <el-col :span="4" class="name" style="position: absolute;margin-left: 550px;margin-top: -50px;">
                                        {{item.consignee}}
                                    </el-col>
                                    <el-col :span="2" class="price" style="position: absolute;
                margin-left: 650px;margin-top: -50px;color: red;font-size: 20px">
                                        ￥{{item.price}}
                                    </el-col>
                                    <el-col :span="4" class="status" style="position: absolute;margin-left: 750px;margin-top: -50px;">
                                        <span style="font-size: small">{{userIdFormatter(item, null, item.orderStatus, null)}}</span>
                                    </el-col>
                                    <el-col :span="2"  style="position: absolute;margin-left: 850px;margin-top: -10px;">
                                        <el-button link type="primary" @click="goToOrderDetail(item.id)">订单详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </el-card>
            </el-row>
        </div>


        <!-- 待支付订单列表 -->
        <div>
            <el-row v-for="item in orderList" v-show="payingOrderCard" :key="item.id">
                <el-card style="width: 1300px; margin: 10px 10px;">
                    <!-- 订单操作栏 -->
                    <div style="background-color: white;">
                        <el-row>
                            <el-col :span="24" style="border-bottom: 3px solid #777777">
                                <!-- 订单创建时间 -->
                                <span style="font-size: 25px; padding-left: 10px; color: red">{{ item.shopName }}</span>
                                <span style="font-size: 15px; padding-left: 20px">{{ item.createTime }}</span>
                                <span style="font-size: 15px; padding-left: 100px">订单号：{{ item.id }}</span>
                               <el-row>
                                 <el-col :span="12">
                                   <el-checkbox v-model="selectedItems" :label="item.id" style="margin-left: 1000px; padding-top: -10px" size="15px"></el-checkbox>
                                 </el-col>
                                 <el-row :span="12">
                                   <el-icon style="margin-left: 1100px;padding-top: -10px" size="15px" @click="delOrder(index)"><Close/></el-icon>
                                 </el-row>
                               </el-row>
                            </el-col>
                        </el-row>
                    </div>
                    <!-- 商品栏 -->
                    <div>
                        <el-row>
                            <div>
                                <el-row :gutter="10" class="fixed-layout">
                                    <el-col :span="6">
                                        <el-image :src="baseUrl+item.productsImg" style="width: 100px;height: 100px;margin-top: 10px;display:block;" alt="Carrot Image"/>
                                    </el-col>
                                    <div style="width: 500px">
                                        <el-col :span="10" class="product-description" style="margin-left: 150px; margin-top: -90px;">
                                            {{ item.productsMsg }}
                                        </el-col>
                                    </div>
                                    <el-col :span="2" class="quantity" style="position: absolute; margin-left: 450px; margin-top: -50px;">
                                      x{{item.quantity}}
                                    </el-col>
                                    <el-col :span="4" class="name" style="position: absolute; margin-left: 550px; margin-top: -50px;">
                                        {{ item.consignee }}
                                    </el-col>
                                    <el-col :span="2" class="price" style="position: absolute; margin-left: 650px; margin-top: -50px; color: red; font-size: 20px">
                                        ￥{{ item.price }}
                                    </el-col>
                                    <el-col :span="4" class="status" style="position: absolute; margin-left: 750px; margin-top: -50px;">
                                        <span style="font-size: small">{{userIdFormatter(item, null, item.orderStatus, null)}}</span>
                                    </el-col>
                                    <el-col :span="2" style="position: absolute; margin-left: 850px; margin-top: -10px;">
                                        <el-button link type="primary" @click="goToOrderDetail(item.id)">订单详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </el-card>
            </el-row>
            <!-- 只在待支付订单页面显示 -->
            <div v-if="isPayingPage" style="text-align: right; margin-top: 20px;">
                <!-- 显示总价 -->
                <span style="font-size: 20px; color: red;">总价：￥{{ totalAmount }}</span>
            </div>
            <div v-if="isPayingPage" style="text-align: right; margin-top: 20px;">
                <!-- 付款 -->
                <el-button type="primary" @click="payOrder">结算</el-button>
            </div>
        </div>


        <!--待收货订单列表-->
        <div>
            <el-row v-for="item in orderList" v-show="waitingDeliveryOrderCard ">
                <el-card style="width: 1200px;margin: 10px 10px;">
                    <!--订单操作栏-->
                    <div style="background-color: white;">
                        <el-row>
                            <el-col :span="24" style="border-bottom: 3px solid #777777">
                                <!--订单创建时间-->
                                <span style="font-size: 25px;padding-left: 10px;color: red">{{item.shopName}}</span>
                              <span style="font-size: 15px; padding-left: 20px">{{ item.createTime }}</span>
                                <span style="font-size: 15px;padding-left: 50px">订单号：{{item.id}}</span>
                                <el-icon style="margin-left: 1100px;padding-top: -10px" size="15px"><Close /></el-icon>
                            </el-col>
                        </el-row>
                    </div>
                    <!--商品栏-->
                    <div>
                        <el-row>
                            <div>
                                <el-row :gutter="10" class="fixed-layout">
                                    <el-col :span="6">
                                        <el-image :src="baseUrl+item.productsImg" style="width: 100px;height: 100px;margin-top: 10px;display:block;" alt="Carrot Image"/>
                                    </el-col>
                                    <div style="width: 500px">
                                        <el-col :span="10" class="product-description" style="margin-left: 150px;margin-top: -90px;">
                                            {{item.productsMsg}}
                                        </el-col>
                                    </div>
                                    <el-col :span="2" class="quantity" style="position: absolute;margin-left: 450px;margin-top: -50px;">
                                      x{{item.quantity}}
                                    </el-col>
                                    <el-col :span="4" class="name" style="position: absolute;margin-left: 550px;margin-top: -50px;">
                                        {{item.consignee}}
                                    </el-col>
                                    <el-col :span="2" class="price" style="position: absolute;
                margin-left: 650px;margin-top: -50px;color: red;font-size: 20px">
                                        ￥{{item.price}}
                                    </el-col>
                                    <el-col :span="4" class="status" style="position: absolute;margin-left: 750px;margin-top: -50px;">
                                        <span style="font-size: small">{{userIdFormatter(item, null, item.orderStatus, null)}}</span>
                                    </el-col>
                                    <el-col :span="2"  style="position: absolute;margin-left: 850px;margin-top: -10px;">
                                        <el-button link type="primary" @click="goToOrderDetail(item.id)">订单详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </el-card>
            </el-row>
        </div>

        <!--待评价订单列表-->
        <div>
            <el-row v-for="item in orderList" v-show="waitingCommentOrderCard ">
                <el-card style="width: 1200px;margin: 10px 10px;">
                    <!--订单操作栏-->
                    <div style="background-color: white;">
                        <el-row>
                            <el-col :span="24" style="border-bottom: 3px solid #777777">
                                <!--订单创建时间-->
                                <span style="font-size: 25px;padding-left: 10px;color: red">{{item.shopName}}</span>
                                <span style="font-size: 15px;padding-left: 20px">{{item.createTime}}</span>
                                <span style="font-size: 15px;padding-left: 50px">订单号：{{item.id}}</span>
                                <el-icon style="margin-left: 1100px;padding-top: -10px" size="15px"><Close /></el-icon>
                            </el-col>
                        </el-row>
                    </div>
                    <!--商品栏-->
                    <div>
                        <el-row>
                            <div>
                                <el-row :gutter="10" class="fixed-layout">
                                    <el-col :span="6">
                                        <el-image :src="baseUrl+item.productsImg" style="width: 100px;height: 100px;margin-top: 10px;display:block;" alt="Carrot Image"/>
                                    </el-col>
                                  <div style="width: 500px">
                                    <el-col :span="10" class="product-description" style="margin-left: 150px;margin-top: -90px;">
                                      {{item.productsMsg}}
                                    </el-col>
                                  </div>
                                    <el-col :span="2" class="quantity" style="position: absolute;margin-left: 450px;margin-top: -50px;">
                                        x{{item.quantity}}
                                    </el-col>
                                    <el-col :span="4" class="name" style="position: absolute;margin-left: 550px;margin-top: -50px;">
                                        {{item.consignee}}
                                    </el-col>
                                    <el-col :span="2" class="price" style="position: absolute;
                margin-left: 650px;margin-top: -50px;color: red;font-size: 20px">
                                        ￥{{item.price}}
                                    </el-col>
                                    <el-col :span="4" class="status" style="position: absolute;margin-left: 750px;margin-top: -50px;">
                                        <span style="font-size: small">{{userIdFormatter(item, null, item.orderStatus, null)}}</span>
                                    </el-col>
                                    <el-col :span="2"  style="position: absolute;margin-left: 850px;margin-top: -10px;">
                                        <el-button link type="primary" @click="goToOrderDetail(item.id)">订单详情</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </el-row>
                    </div>
                </el-card>
            </el-row>
        </div>
    </div>



</template>

<script setup>


import {computed, onMounted, ref} from "vue";
import index from "vuex";
import router from "@/router";
import axios from "axios";
import qs from "qs";

const baseUrl = getBaseUrl();
//定义数组用于保存用户已完成订单信息
const orderList = ref([
    // {
    //     id: 3243467468726487,
    //     price: 20.00,
    //     quantity: 1,
    //     consignee:'六个核弹',
    //     proDesc:'新鲜现挖带泥胡萝卜当季农家自种萝卜脆爽多汁水果蔬菜',
    //     imageUrl: '/image/login/carrot2.jpeg',
    //     shopName:'xxx旗舰店',
    //     status:'已完成',
    //     time:'2024-01-01 13:00:04'
    // },
    // {
    //     id: 231783612783627,
    //     name: 'Product 2',
    //     price: 30,
    //     quantity: 1,
    //     consignee:'潘飘飞丝',
    //     proDesc:'【寿光蔬菜】寿光胡萝卜冰糖心水果萝卜红萝卜即食煲汤不带泥新鲜 畅销【净重3斤】农家胡萝卜 【新鲜发出丨产地直发】',
    //     imageUrl: '/image/login/carrot1.jpeg',
    //     shopName:'yyy旗舰店',
    //     status:'已完成',
    //     time:'2022-12-01 09:34:56'
    // }
])
//从localStorage中获取userId
const userId = localStorage.getItem('userId')
//定义对象用于存储查询不同状态的订单
const queryOrderStatus = {
  userId:userId,
  status:''
}
//定义方法用于向后端查询已完成订单数据
const querySuccessOrderList =()=>{
  //将订单状态的值设置为50和60
  axios.get()
}

//定义数组用于保存用户待支付订单信息
const payingList = ref([
    // {
    //     id: 43728463278462,
    //     price: 20.00,
    //     quantity: 1,
    //     consignee:'六个核弹',
    //     proDesc:'鸿顺【冰鲜】黄花鱼4条4斤 生鲜鱼类 宁德大黄鱼 源头直发',
    //     imageUrl: '/image/login/product/fish.png',
    //     shopName:'xxx旗舰店',
    //     status:'待支付',
    //     time:'2024-01-01 13:00:04'
    // },
    // {
    //     id: 4764763475746358,
    //     price: 30,
    //     quantity: 1,
    //     consignee:'潘飘飞丝',
    //     proDesc:'跑山猪去皮五花肉块2kg 烤肉炒菜食材 新鲜速冻 红烧肉原料',
    //     imageUrl: '/image/login/product/pig.png',
    //     shopName:'yyy旗舰店',
    //     status:'待支付',
    //     time:'2023-04-15 012:24:16'
    // }
]);



//定义数组用于保存用户待收货订单信息
const waitingDeliveryList =ref([
    // {
    //     id: 44218463278462,
    //     price: 20.00,
    //     quantity: 1,
    //     consignee:'六个核弹',
    //     proDesc:'骑猴赶马云南阳光玫瑰葡萄【当天采摘】香印晴王葡萄水果整串葡萄水果新鲜',
    //     imageUrl: '/image/login/product/putao.png',
    //     shopName:'xxx旗舰店',
    //     status:'待收货',
    //     time:'2024-03-12 13:00:04'
    // },
    // {
    //     id: 4764763423216358,
    //     price: 30,
    //     quantity: 1,
    //     consignee:'潘飘飞丝',
    //     proDesc:'原装进口厄瓜多尔白虾 1.65kg 大号30-40只/kg 50-66只/盒 大虾',
    //     imageUrl: '/image/login/product/xia.png',
    //     shopName:'yyy旗舰店',
    //     status:'待收货',
    //     time:'2024-03-10 12:24:16'
    // }
])
//定义数组用于保存用户待评论的订单信息
const waitingCommentList =ref([
    // {
    //     id: 44218463278462,
    //     price: 20.00,
    //     quantity: 1,
    //     consignee:'六个核弹',
    //     proDesc:'正宗山东本地西红柿小果尝鲜价 西红柿小果 3斤 单果重60G+',
    //     imageUrl: '/image/login/product/tomato.png',
    //     shopName:'xxx旗舰店',
    //     status:'待评价',
    //     time:'2024-02-10 13:10:04'
    // }
]);
const orderStatus=ref('1');
//定义变量用于控制已完成订单卡片显示
const finishOrderCard =ref(true);
//定义方法用于展现已完成订单
const showFinishOrders =()=>{
    //关闭待支付订单
    payingOrderCard.value = false;
    waitingDeliveryOrderCard.value =false;
    waitingCommentOrderCard.value = false;
    //展现已完成订单
    finishOrderCard.value = true;
    isPayingPage.value= false; // 判断是否在待支付页面
    orderStatus.value='30';
    getOrderList();
}
onMounted(()=>{
  showFinishOrders();
})

//定义变量用于控制待支付订单卡片显示
const payingOrderCard = ref(false);
const isPayingPage=ref(false);
//定义方法用于展现待支付订单
const showPayingOrders =()=>{
    //关闭已完成订单
    finishOrderCard.value = false;
    waitingDeliveryOrderCard.value =false;
    waitingCommentOrderCard.value = false;
    //展现待支付订单
    payingOrderCard.value = true;
    isPayingPage.value= true;
    orderStatus.value='5';
    getOrderList();
}
//定义变量用于控制待收货订单卡片显示
const waitingDeliveryOrderCard = ref(false);
//定义方法用于展现待收货订单
const showWaitingDeliveryOrders =()=>{
    //关闭已完成订单卡片和待支付订单卡片
    finishOrderCard.value = false;
    payingOrderCard.value = false;
    waitingCommentOrderCard.value = false;
    //展现待收货订单
    waitingDeliveryOrderCard.value = true;
    isPayingPage.value= false;
    orderStatus.value='10';
    getOrderList();

}

//定义变量用于控制待评论订单卡片显示
const waitingCommentOrderCard = ref(false);
//定义方法用于展现待评论订单
const showWaitingCommentOrders =()=>{
    //关闭已完成订单卡片和待支付订单卡片和待收货订单卡片
    finishOrderCard.value = false;
    payingOrderCard.value = false;
    waitingDeliveryOrderCard.value = false;
    //展现待评论订单
    waitingCommentOrderCard.value = true;
    isPayingPage.value= false; // 判断是否在待支付页面
    orderStatus.value='40';
    getOrderList();
}
const user=ref(getUser());

//获取订单列表
const getOrderList =()=>{
    let data1 = {
        userId:user.value.id,
        orderStatus:orderStatus.value
    }
    let data=qs.stringify(data1);
    //获取订单列表
    axios.get(BASE_URL+'/v1/user/queryOrderParam?'+data)
        .then(response => {
            //将订单列表保存到orderList中
            orderList.value = response.data.data;
        })
        .catch(error => {
            console.error('获取订单列表失败', error);
        });
};
onMounted(()=>{
    getOrderList();
})
//定义方法用于删除订单
const delOrder =(index)=>{
    //让用户确认是否要删除订单
    if(confirm("确认要删除该订单吗?")){
        //更新数据
        orderList.value = [];
        //提示用户删除成功
        alert("删除成功");
        //重新加载页面
        showFinishOrders();
    }
}
//定义对象用于保存搜索条件
const search = ref('');


const selectedItems = ref([]); // 选中的订单ID

// 计算总价
const totalAmount = computed(() => {
    return payingList.value
        .filter(item => selectedItems.value.includes(item.id))
        .reduce((total, item) => total + (item.price * item.quantity), 0);
});
// //定义方法用于支付订单
// const payOrder =(index)=>{
//     //让用户确认是否要支付订单
//     if(confirm("确认要支付该订单吗?")){
//
//         payingList.value[index].status = '已支付';
//         payingList.value = [];
//         //提示用户支付成功
//         alert("支付成功");
//         //重新加载页面
//         showPayingOrders();
//     }};

const payOrder = (orderId) => {
    router.push('/orderDetails?id='+orderId)
}

//跳转订单详情
const goToOrderDetail = (orderId) => {
    // 使用路由导航到订单详情页面，并将订单ID作为参数传递
    router.push('/orderDetail?id='+orderId);
};
// 订单状态码 转换为订单状态
const userIdFormatter = (row, column, cellValue, index) => {
    if (cellValue==5){
        return '待支付';
    }else if (cellValue == 10){
        return '待收货';
    }else if (cellValue == 30){
        return '已完成';
    }else if (cellValue == 40){
        return '待评价';
    }
    return cellValue;
}
</script>



<style scoped>
.fixed-layout {
    display: flex;
    align-items: center; /* 垂直居中 */
}

.product-description, .quantity, .name, .price, .status {
    line-height: 1.5; /* 统一设置行间距 */
    text-align: center; /* 水平居中显示文字 */
}
.quantity, .name, .price, .status {
    padding-top: 40px; /* 保持顶部间距一致 */
}

.quantity, .price, .status {
    font-size: 14px; /* 根据需要调整字体大小 */
}

</style>